<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="head">
                    <div class="head1">
                        <span>患者姓名：</span>
                        <el-input v-model="input" placeholder="请输入姓名" />
                    </div>
                    <div class="head1">
                        <span>状态：</span>
                        <el-select v-model="value" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </div>
                    <div class="head1">
                        <span>挂号日期：</span>
                        <el-date-picker v-model="value1" type="daterange" range-separator="——" start-placeholder=""
                            end-placeholder="" :size="size" />
                    </div>
                    <el-button type="primary">查询</el-button>
                </div>
            </el-header>

            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="挂号编号" width="180">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.registerId }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂号费（元）" width="110">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.registerMoney }}
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="科室名称" width="80">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.departmentName }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="医生姓名" width="80">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.doctorName }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="患者姓名" width="100">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.patientName }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂号时间" width="100">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.registerTime }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作员" width="100">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.operator }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="号类型" width="100">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.numberType }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="60">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #reference>
                                    {{ scope.row.state }}

                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                            <el-button size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pages">
                    <div>
                        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                    </div>
                </div>
                
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>
    </div>
</template>
  


<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value1 = ref('')
const input = ref('')
const options = [
    {
        value: 'Option1',
        label: '全部',
    },
    {
        value: 'Option2',
        label: '已就诊',
        disabled: true,
    },
    {
        value: 'Option3',
        label: '未就诊',
    },
    {
        value: 'Option4',
        label: '已退号',
    },
    {
        value: 'Option5',
        label: '已作废',
    },
    {
        value: 'Option6',
        label: '未支付',
    }, {
        value: 'Option6',
        label: '部分支付',
    },
]
const tableData  = [
    {
        registerId: '2016-05-03',
        registerMoney: 10,
        departmentName: "外科",
        doctorName: "张三",
        patientName: "李四",
        registerTime: "2016-05-03",
        operator: "王二",
        numberType: "看病",
        state: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        registerId: '2016-05-03',
        registerMoney: 10,
        departmentName: "外科",
        doctorName: "张三",
        patientName: "李四",
        registerTime: "2016-05-03",
        operator: "王二",
        numberType: "看病",
        state: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        registerId: '2016-05-03',
        registerMoney: 10,
        departmentName: "外科",
        doctorName: "张三",
        patientName: "李四",
        registerTime: "2016-05-03",
        operator: "王二",
        numberType: "看病",
        state: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        registerId: '2016-05-03',
        registerMoney: 10,
        departmentName: "外科",
        doctorName: "张三",
        patientName: "李四",
        registerTime: "2016-05-03",
        operator: "王二",
        numberType: "看病",
        state: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

<style>
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
}

.head {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
    width: 1100px;

}

.head1 {
    padding: 10px;
    margin-right: 5px;


}

.el-input {
    width: 180px;
}
.pages{
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
   
}
</style>